<template>
  <el-container style="margin:  0 0 0 0 ">
    <el-header class="top">
      <el-col :span="3">
        <a href="#" class="logo">
        <span class="iconfont icon-zuanshi" style="font-size: 25px;"><b>温州房产圈</b></span>
        </a>
      </el-col>
      <el-col :span="19" style="text-align:right;">
        <div class="close">
        <el-button type="text" @click="zhuxiao()">注销</el-button>
        </div>
      </el-col>
    </el-header>
    <el-container style="background: #f5f5f5;">
      <el-aside width="200px" class="aside" >
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" style="height: 100%">
          <router-link to="/subjectMatter">
          <el-menu-item index="1">
              <i class="iconfont  icon-simple45" style="font-size: 18px"></i>
              <span slot="title">标的物</span>
          </el-menu-item>
          </router-link>
          <router-link to="/agent">
          <el-menu-item index="2">
            <i class="iconfont  icon-wode" style="font-size: 18px"></i>
            <span slot="title">经纪人</span>
          </el-menu-item>
          </router-link>
          <router-link to="/agencyCompany">
          <el-menu-item index="3">
            <i class="iconfont icon-cf-c12" style="font-size: 18px"></i>
            <span slot="title">代办公司</span>
          </el-menu-item>
          </router-link>
          <!--<router-link to="/users">-->
          <!--<el-menu-item index="4">-->
            <!--<i class="iconfont  icon-guanyu" style="font-size: 18px"></i>-->
            <!--<span slot="title">用户</span>-->
          <!--</el-menu-item>-->
          <!--</router-link>-->
          <router-link to="/comment">
          <el-menu-item index="5">
            <i class="iconfont icon-pinglun" style="font-size: 18px"></i>
            <span slot="title">评论</span>
          </el-menu-item>
          </router-link>
          <router-link to="/expert">
            <el-menu-item index="6">
              <i class="iconfont icon-zhuanjia-copy" style="font-size: 18px"></i>
              <span slot="title">专家</span>
            </el-menu-item>
          </router-link>
          <router-link to="/reply">
            <el-menu-item index="7">
              <i class="iconfont icon-kefu3" style="font-size: 18px"></i>
              <span slot="title">回复</span>
            </el-menu-item>
          </router-link>
        </el-menu>
      </el-aside>
      <el-main class="main" >
        <router-view>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import {removeToken} from "@/auth";

  export default {
    data() {
      return {
        isCollapse: false
      };
    },
    methods:{
      zhuxiao(){
        this.$confirm('确认注销 吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          removeToken();
          this.$router.push({path: '/login'});
          this.$message({
            message: '注销成功!',
            type: 'success'
          });
        }).catch(() => {
        });
      }
    }
  }
</script>
<style scoped>
  @import "//at.alicdn.com/t/font_492396_n9vcmi7n0d6uhaor.css";

  a{text-decoration:none}
  .top {
    min-width: 100%;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
    z-index: 1999;
    color: #48576a;
    height: 40px;
    width: 100%;
    animation-name: slideInDown;
    animation-fill-mode: both;
  }

  .logo {
    text-align: center;
    color: #48576a;
    font-size: 28px;
    display: block;
    height: 38px;
    line-height: 48px;
    margin-top: 6px;
  }

  .close .el-button{
    color: #48576a;
    line-height: 38px;
  }
  .main{
    background: white;
    margin: 30px;
    border:1px solid rgb(222,222,222);
    border-radius:7px;
    box-shadow: 1px 1px 10px rgb(222,222,222);
    overflow:hidden;
  }
  .aside{
    height: 100vh;
    box-shadow: 1px 5px 2px rgba(222,222,222,0.5);
  }
</style>
